<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>商品上架</title>
    <link href="../../static/css/index.css" rel="stylesheet" th:href="@{/static/css/index.css}">
    <!-- 自定义css文件 -->
    <link href="../../static/css/common.css" rel="stylesheet" th:href="@{/static/css/common.css}">
</head>

<body>

<div th:replace="~{nav :: nav('商品上架')}"></div>
<div th:replace="~{header :: header}"></div>
<div class="margin-helper">
    <div class="samoyed-content">
        <div th:replace="~{pageHead :: pageHead(pageName='商品上架', parentMenu='菜单导航')}"></div>
        <div id="page-content" class="page-content" v-cloak>
            <!--基本信息-->
            <el-form :model="form" :rules="rules" ref="form">
                <div class="section-title">基本信息</div>
                <el-row class="samoyed-row" type="flex" align="middle">
                    <el-col :span="2">
                        <div class="center">商品名称</div>
                    </el-col>
                    <el-col :span="1">
                        <el-popover class="tips-align" placement="top" width="400" trigger="hover" th:title="说明"
                                    th:content="xxxxxxxx">
                            <i slot="reference" class="el-icon-question"></i>
                        </el-popover>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="productName">
                            <el-input v-model="form.productName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <div class="center">商品类别</div>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item prop="productCategoryId">
                            <el-select v-model="form.productCategoryId" placeholder="请选择商品类别">
                                <el-option
                                        v-for="item in categorys"
                                        :key="item.categoryId"
                :label="item.categoryName"
                :value="item.categoryId">
                </el-option>
                </el-select>
                </el-form-item>
                </el-col>
                <el-col :span="2">
                    <div class="center">排序</div>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="productOrder">
                        <el-input v-model.number="form.productOrder" type="number" style="width:80px"></el-input>
                    </el-form-item>
                </el-col>
                </el-row>
                <el-row class="samoyed-row" type="flex" align="middle">
                    <el-col :span="2">

                        <div class="center">条形码</div>
                    </el-col>
                    <el-col :span="1">
                        <el-popover class="tips-align" placement="top" width="400" trigger="hover" title="说明">
                            <i slot="reference" class="el-icon-question"></i>
                        </el-popover>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="productCode">
                            <el-input v-model="form.productCode"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <div class="center">建议零售价</div>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="productSuggestPrice">
                            <el-input v-model.number="form.productSuggestPrice"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <div class="center">品牌</div>
                    </el-col>
                    <el-col :span="4">
                        <el-input v-model="form.productBrandId"></el-input>
                    </el-col>
                </el-row>

                <el-row class="samoyed-row" type="flex" align="middle">
                    <el-col :span="2">
                        <div class="center">小单位</div>
                    </el-col>
                    <el-col :span="1">
                        <el-popover class="tips-align" placement="top" width="400" trigger="hover" title="说明">
                            <i slot="reference" class="el-icon-question"></i>
                        </el-popover>
                    </el-col>
                    <el-col :span="3">
                        <el-form-item prop="productSmallUnit">
                            <el-input v-model="form.productSmallUnit"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <div class="center">价格</div>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="productSmallPrice">
                            <el-input v-model.number="form.productSmallPrice"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <div class="center">规格</div>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item prop="productStandard">
                            <el-input v-model="form.productStandard"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row class="samoyed-row" type="flex" align="middle">
                    <el-col :span="2">
                        <div class="center">大单位</div>
                    </el-col>
                    <el-col :span="1">
                        <el-popover class="tips-align" placement="top" width="400" trigger="hover" title="说明">
                            <i slot="reference" class="el-icon-question"></i>
                        </el-popover>
                    </el-col>
                    <el-col :span="3">
                        <el-form-item prop="productLargerUnit">
                            <el-input v-model="form.productLargerUnit"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <div class="center">价格</div>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="productLargerPrice">
                            <el-input v-model.number="form.productLargerPrice"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <div class="center">大规格</div>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item prop="productLargerStandard">
                            <el-input v-model="form.productLargerStandard"></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>
                <div class="samoyed-task" v-for="(otherData, otherDataIndex) in form.otherDatas">
                    <el-row class="samoyed-row" type="flex" align="middle">
                        <el-col :span="2">
                            <div class="center">参数名称</div>
                        </el-col>
                        <el-col :span="1">
                            <el-popover class="tips-align" placement="top" width="400" trigger="hover" th:title="说明"
                                        th:content="xxxxxxxx">
                                <i slot="reference" class="el-icon-question"></i>
                            </el-popover>
                        </el-col>
                        <el-col :span="6">
                            <el-input placeholder="请输入(例:口味/尺寸/...)" v-model="otherData.name">
                            </el-input>
                        </el-col>
                        <el-col :span="2">
                            <div class="center">参数数值</div>
                        </el-col>
                        <el-col :span="12">
                            <el-input placeholder="空格隔开(例:酸 甜 苦 辣)" v-model="otherData.value">
                            </el-input>
                        </el-col>
                        <el-col :span="1" v-show="form.otherDatas.length>0">
                            <div class="center">
                                <i class="el-icon-close btn hover-normal-color"
                                   @click="removeOtherData(otherDataIndex)"></i>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
            <div class="add-task-btn-wrapper">
                    <span class="btn normal-color" @click="addOtherData">
                        <i class="el-icon-circle-plus-outline center"></i>
                        <span>添加参数</span>
                    </span>
            </div>

            <!--自定义信息-->
            <div class="section-title">编辑自定义信息</div>
            <el-row type="flex" align="middle" class="samoyed-row">
                <el-col :span="8">
                    <el-upload
                            class="upload-demo"
                            drag
                            :show-file-list=true
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload"
                            name="image-file"
                            action=""
                            :http-request="uploadSectionFile">

                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-upload avatar-uploader-icon"></i>
                        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-col>
                <el-col :span="2">
                    <div class="center">是否上架</div>
                </el-col>
                <el-col :span="2">
                    <el-switch v-model="form.productIsSale" active-value="1" inactive-value="0"></el-switch>
                </el-col>
                <el-col :span="2">
                    <div class="center">是否缺货</div>
                </el-col>
                <el-col :span="2">
                    <el-switch v-model="form.productIsLack" active-value="1" inactive-value="0"></el-switch>
                </el-col>
            </el-row>

            <div class="build-btn-bg"></div>
            <div class="build-btn-wrapper">
                <el-button type="primary" size="medium" @click="onSubmit('form')" class="build-btn">添加商品</el-button>
            </div>
        </div>
    </div>
</div>

<script src="../../static/js/vue.js" th:src="@{/static/js/vue.js}"></script>
<script src="../../static/js/element.js" th:src="@{/static/js/element.js}"></script>
<script src="../../static/js/jquery-3.3.1.min.js" th:src="@{/static/js/jquery-3.3.1.min.js}"></script>
<script src="../../static/js/utils.js" th:src="@{/static/js/utils.js}"></script>
<script type="text/javascript" th:src="@{/static/js/axios.min.js}"></script>
<script type="text/javascript" th:src="@{/static/js/config.js}"></script>
<!-- 引用vue组件相关的js文件 -->
<div th:replace="~{nav :: vue('商品上架')}"></div>
<div th:replace="~{header :: vue}"></div>
<!-- 本页面的js脚本 -->
<script th:inline="javascript">

    //参数
    function otherData() {
        this.name = '';
        this.value = '';
    }

    new Vue({
        el: '#page-content',
        data: {
            web_upload_action: _global_web_server + "/common/upload",
            web_static_server: _global_web_server + "/static/",
            form: {
                productName: '',
                productCode: '',
                productCategoryId: '',
                productStandard: '',
                productIsSale: '1',
                productIsLack: '1',
                productBrandId: '',
                productOrder: 1,
                productSmallUnit: '',
                productSmallPrice: '',
                productLargerUnit: '',
                productSuggestPrice:'0',
                productLargerPrice: '',
                productPhoto: '',
                productLargerStandard:'',
                otherDatas: []
            },
            categorys: [],
            imageUrl: '',
            rules: {
                productName: [
                    {required: true, message: '请输入商品名称', trigger: 'blur'},
                    {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
                ],
                productCategoryId: [
                    {required: true, message: '请选择类别', trigger: 'change'}
                ],

                productCode: [
                    {required: true, message: '请输入条形码', trigger: 'blur'}
                ],
                productStandard: [
                    {required: true, message: '请输入小规格', trigger: 'blur'}
                ],
                productSmallUnit: [
                    {required: true, message: '请输入小单位', trigger: 'blur'}
                ],
                productLargerUnit: [
                    {required: true, message: '请输入大单位', trigger: 'blur'}
                ],
                productSmallPrice: [

                    {type: 'number', message: '价格必须为数字值', trigger: 'blur'}
                ],
                productLargerPrice: [

                    {type: 'number', message: '价格必须为数字值', trigger: 'blur'}
                ],
                productOrder: [

                    {type: 'number', message: '必须是数字', trigger: 'blur'}
                ],
                productSuggestPrice: [

                    {type: 'number', message: '建议价格必须是数字', trigger: 'blur'}
                ],
                productLargerStandard: [

                    {required: true, message: '请输入大规格', trigger: 'blur'}
                ]

            }
        },
        created: function () {
            this.init();
        },
        computed: {},
        methods: {
            addOtherData: function () {
                this.form.otherDatas.push(new otherData());
            },
            removeOtherData: function (index) {
                this.form.otherDatas.splice(index, 1);
            },
            //查询类别
            init: function () {
                var url = _global_web_server + "/category/qryList";
                var _self = this;
                axios.get(url).then(function (response) {
                    var jsonResult = response.data;
                    _self.categorys = jsonResult.data;


                }).catch(function (reason) {
                    console.log(reason);
                });
            },
            onSubmit: function (formName) {
                var _self = this;
                this.$refs[formName].validate(function (valid) {
                    if (valid) {

                        var url = _global_web_server + "/product/add";

                        $.post(url, _self.form, function (result) {

                            if (result.status == "200") {
                                _self.$notify({
                                    title: '温馨提示',
                                    message: result.message,
                                    type: 'success'
                                });
                                _self.$refs[formName].resetFields();
                                //清空图片
                                _self.imageUrl='';


                            } else {
                                _self.$notify({
                                    title: '遗憾提示',
                                    message: result.message,
                                    type: 'error'
                                });

                            }


                        });


                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });


            },
            uploadSectionFile: function (param) {
                var _self = this;
                var fileObj = param.file;
                var img = new Image();
                img.src = window.URL.createObjectURL(fileObj);
                console.log(fileObj.size)
                var canvas = document.createElement('canvas');
                var context = canvas.getContext('2d');

                // base64地址图片加载完毕后
                img.onload = function () {
                    // 图片原始尺寸
                    var originWidth = this.width;
                    var originHeight = this.height;

                    console.log('图片原尺寸是：' + [originWidth, originHeight].join('x'));

                    // 计算出目标压缩尺寸
                    var maxWidth = 400, maxHeight = 400;

                    // 目标尺寸
                    var targetWidth = originWidth, targetHeight = originHeight;
                    //超过60KB进行压缩 否则就不压缩了
                    if (fileObj.size > 61440) {
                        if (originWidth > maxWidth || originHeight > maxHeight) {
                            // 图片尺寸超过400x400的限制
                            if (originWidth / originHeight > maxWidth / maxHeight) {
                                // 更宽，按照宽度限定尺寸
                                targetWidth = maxWidth;
                                targetHeight = Math.round(maxWidth * (originHeight / originWidth));
                            } else {
                                targetHeight = maxHeight;
                                targetWidth = Math.round(maxHeight * (originWidth / originHeight));
                            }

                            console.log('超过400x400的限制，图片大小限制为' + [targetWidth, targetHeight].join('x'));
                        } else {
                            console.log('图片尺寸较小，不压缩');
                        }

                        canvas.width = targetWidth;
                        canvas.height = targetHeight;

                        // 清除画布
                        context.clearRect(0, 0, targetWidth, targetHeight);

                        // 图片压缩
                        context.drawImage(img, 0, 0, targetWidth, targetHeight);
                        // 转为blob并上传
                        canvas.toBlob(function (blob) {
                            // FormData 对象
                            var formData = new FormData();
                            // 文件对象
                            formData.append("image-file", blob);
                            _self.upload(formData);

                        }, fileObj.type || 'image/png');


                    }else{
                        // FormData 对象
                        var formData = new FormData();
                        // 文件对象
                        formData.append("image-file", fileObj);
                        _self.upload(formData);
                    }


                };

            },
            upload: function (formData) {
                var _self = this;
                $.ajax({
                    url: _self.web_upload_action,
                    method: 'POST',
                    data: formData,
                    contentType: false, // 注意这里应设为false
                    processData: false,
                    cache: false,
                    success: function (res) {
                        if (res.status == '200') {
                            _self.form.productPhoto = res.data;
                            _self.imageUrl = _self.web_static_server + res.data;
                        }


                    },
                    error: function (jqXHR) {
                        console.log(JSON.stringify(jqXHR));
                    }
                });

            }
            ,
            handleAvatarSuccess: function (res, file, fileList) {
                var _self = this;


            },
            beforeAvatarUpload: function (file) {
                var isJPG = file.type === 'image/jpeg';
                var isLt1M = file.size / 1024 / 1024 > 1;
                var max = file.size / 1024 / 1024 > 5;
                if (!isJPG) {
                    this.$message.error('上传图片只能是 JPG 格式!');
                }
                //
                if (isLt1M) {
                    this.$message.info('上传图片超过1M,将进行压缩!');
                }
                if (max) {
                    this.$message.error('上传图片超过5M,请手动压缩');
                }
                return isJPG && !max;
            }

        }
    });
</script>

</body>

</html>